<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>005Basic_Lights</title>
    <link href="../CSS/normalize.min.css"  rel="stylesheet">
    <link href="../CSS/slideout.css"  rel="stylesheet">
    <link href="../CSS/github.css"  rel="stylesheet">
    <link href="../CSS/github.css"  rel="stylesheet">
    <link href="../CSS/font-awesome.min.css"  rel="stylesheet">
    <link href="../CSS/perfect-scrollbar.min.css"  rel="stylesheet">
    <link href="../CSS/main.css"  rel="stylesheet">
</head>
<body>
<!--@@下面是翻译正文@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@-->

<nav class=" slideout-menu slideout-menu" id="menu"><div class="searchbar-mobile searchbar"><form action="/search" method="get"><input name="q" type="text" placeholder="Search..."><button type="submit"><i class="fa fa-search"></i></button></form></div><a style="cursor: help;" href="/"><i class="fa fa-home"></i>Home</a><a style="cursor: help;" href="/whats-new"><i class="fa fa-file-text-o"></i>What's new?</a><a style="cursor: help;" href="/generals"><i class="fa fa-book"></i>Generals</a><a style="cursor: help;" href="/tutorials"><i class="fa fa-cogs"></i>Tutorials</a><a style="cursor: help;" href="/overviews"><i class="fa fa-book"></i>Overviews</a><a style="cursor: help;" href="/exporters"><i class="fa fa-rocket"></i>Exporters</a><a style="cursor: help;" href="/extensions"><i class="fa fa-wrench"></i>Extensions</a><a style="cursor: help;" href="/classes"><i class="fa fa-files-o"></i>Classes</a><a style="cursor: help;" href="/playground"><i class="fa fa-cubes"></i>Playground</a><a style="cursor: help;" href="http://www.babylonjs.com" target="_blank"><i class="fa fa-play"></i>babylonjs.com</a><a style="cursor: help;" href="https://github.com/BabylonJS/Babylon.js" target="_blank"><i class="fa fa-github"></i>Github</a><a style="cursor: help;" href="https://github.com/BabylonJS/Documentation" target="_blank"><i class="fa fa-code-fork"></i>Contribute</a><a style="cursor: help;" href="http://www.html5gamedevs.com/forum/16-babylonjs" target="_blank"><i class="fa fa-html5"></i>Forum</a><div class="searchbar-mobile searchbar"><form action="/search" method="get"><input name="q" type="text" placeholder="Search..."><button type="submit"><i class="fa fa-search"></i></button></form></div><a style="cursor: help;" href="/"><i class="fa fa-home"></i>Home</a><a style="cursor: help;" href="/whats-new"><i class="fa fa-file-text-o"></i>What's new?</a><a style="cursor: help;" href="/generals"><i class="fa fa-book"></i>Generals</a><a style="cursor: help;" href="/tutorials"><i class="fa fa-cogs"></i>Tutorials</a><a style="cursor: help;" href="/overviews"><i class="fa fa-book"></i>Overviews</a><a style="cursor: help;" href="/exporters"><i class="fa fa-rocket"></i>Exporters</a><a style="cursor: help;" href="/extensions"><i class="fa fa-wrench"></i>Extensions</a><a style="cursor: help;" href="/classes"><i class="fa fa-files-o"></i>Classes</a><a style="cursor: help;" href="/playground"><i class="fa fa-cubes"></i>Playground</a><a style="cursor: help;" href="http://www.babylonjs.com" target="_blank"><i class="fa fa-play"></i>babylonjs.com</a><a style="cursor: help;" href="https://github.com/BabylonJS/Babylon.js" target="_blank"><i class="fa fa-github"></i>Github</a><a style="cursor: help;" href="https://github.com/BabylonJS/Documentation" target="_blank"><i class="fa fa-code-fork"></i>Contribute</a><a style="cursor: help;" href="http://www.html5gamedevs.com/forum/16-babylonjs" target="_blank"><i class="fa fa-html5"></i>Forum</a></nav><nav class="nav-main"><!-- Hamburger menu : displayed only in small screens--><i class="fa fa-bars" id="mobilemenu"></i><!-- this button only shows on mobile version of a "class" page--><div class="banner"><div class="menu"><div class="do-not-hover" id="home"><a style="cursor: help;" href="/">Babylon.js | DOCUMENTATION</a></div><div class="item" id="whatsnew"><a style="cursor: help;" href="/whats-new">What's new</a></div><div class="item" id="general"><a style="cursor: help;" href="/generals">General</a></div><div class="item active" id="tutorials"><a style="cursor: help;" href="/tutorials">Tutorials</a></div><div class="item" id="overview"><a style="cursor: help;" href="/overviews">Overviews</a></div><div class="item" id="exporters"><a style="cursor: help;" href="/exporters">Exporters</a></div><div class="item" id="extensions"><a style="cursor: help;" href="/extensions">Extensions</a></div><div class="item" id="classes"><a style="cursor: help;" href="/classes">Classes</a></div><div class="item" id="playground"><a style="border-image: none; cursor: help;" href="/playground">Playground</a></div></div><div class="more"><div class="searchbar"><form action="/search" method="get"><input name="q" type="text" placeholder="Search..."><button type="submit"><i class="fa fa-search"></i></button></form></div></div></div></nav><div class=" slideout-panel slideout-panel" id="wrapper"><div class="statics-banner">
    <h1 style="cursor: help;">教程</h1></div><div class="horizontal-separator"></div><div class="static-content"><h1 style="cursor: help;">光源</h1><br><div class="contentTable"><div class="tocHeader"><span class="tocTitle" style="cursor: help;"><i class="tocIcon fa fa-book"></i>内容列表</span><span class="tocToggle"><i class="fa fa-arrow-up"></i></span></div><div class="tocContent"><ul>    <li><a href="#how-can-i-do-this" style="cursor: help;">怎样做 ?</a></li>    <li><a href="#activatingdeactivating-lights" style="cursor: help;">激活/关闭光源</a></li>    <li><a href="#lights-types" style="cursor: help;">光源种类</a></li>    <li><a href="#extra-information-about-babylonjs-one-line-constructors" style="cursor: help;">关于Babylonjs单行构造函数的额外内容:</a></li>    <li><a href="#normals-and-backfaces-seeing-the-light" style="cursor: help;">法线和背面-观察光源:</a></li>    <li><a href="#limitations" style="cursor: help;">局限</a></li>    <li><a href="#next-step" style="cursor: help;">下一步</a></li></ul></div></div><div id="staticContent"><p style="cursor: help;">既然你已经了解了相机的种类以及如何在你的场景中放置相机，我们将继续我们的教程来研究Babylonjs的光源。</p>    <p><img alt="Elements" src="http://www.babylonjs.com/Screenshots/testlight.jpg"></p>    <p><em style="cursor: help;">一个漂亮的球体与多个光源</em></p>    <h2 style="cursor: help;"><a name="how-can-i-do-this" class="anchor" href="#how-can-i-do-this"></a>怎么做 ?</h2><p style="cursor: help;">光源用来产生每个像素所收到的漫反射和镜面反射的颜色。然后这个颜色与材质共同作用来产生每个像素的最终颜色。</p>    <p style="cursor: help;">在本次教程中，我将向你介绍如何使用Babylonjs所支持的每一种光源。</p>    <h2 style="cursor: help;"><a name="activatingdeactivating-lights" class="anchor" href="#activatingdeactivating-lights"></a>激活/关闭光源</h2><p style="cursor: help;">所有光源都可以激活或关闭通过调用它的<em style="cursor: help;">setEnabled(true/false)</em>方法. 你同样可以控制任何光照的全局强度通过使用<em style="cursor: help;">intensity</em> 属性. 它使用一个浮点值（比如1.5）。接近教程结尾有一个例子演示了如何同时使用<em style="cursor: help;">intensity</em>属性和<em style="cursor: help;">setEnabled()</em>方法.</p>    <h2 style="cursor: help;"><a name="lights-types" class="anchor" href="#lights-types"></a>光源种类</h2><p style="cursor: help;">让我们开始... 和四种炫酷的Babylonjs光源一起:</p>    <ul>        <li><strong style="cursor: help;">点光源</strong></li>    </ul>    <p style="cursor: help;">点光源是一种通过世界空间中的一个唯一点定义的光源。光从这个点的所有方向发出。点光源的一个好例子就是太阳。（几乎每一篇教程讲点光源都用太阳做例子，但实际应用中太阳往往不是点光源）</p>    <p style="cursor: help;">你可以控制任何光的颜色... 通过 <em style="cursor: help;">diffuse（散射，漫反射）</em>和<em style="cursor: help;">specular（镜面反射）</em> 属性:</p><pre><code class="lang-javascript hljs" style="cursor: help;"><span class="hljs-keyword" style="cursor: help;">var</span> light0 = <span class="hljs-keyword" style="cursor: help;">new</span> BABYLON.PointLight(<span class="hljs-string" style="cursor: help;">"Omni0"</span>, <span class="hljs-keyword" style="cursor: help;">new</span> BABYLON.Vector3(<span class="hljs-number">1</span>, <span class="hljs-number">10</span>, <span class="hljs-number">1</span>), scene);    light0.diffuse = <span class="hljs-keyword" style="cursor: help;">new</span> BABYLON.Color3(<span class="hljs-number">1</span>, <span class="hljs-number">0</span>, <span class="hljs-number">0</span>);    light0.specular = <span class="hljs-keyword" style="cursor: help;">new</span> BABYLON.Color3(<span class="hljs-number">1</span>, <span class="hljs-number">1</span>, <span class="hljs-number">1</span>);</code></pre>    <p><img alt="" src="http://blogs.msdn.com/cfs-file.ashx/__key/communityserver-blogs-components-weblogfiles/00-00-01-44-73-metablogapi/8484.image_thumb_53D78E00.png"></p>    <p><em style="cursor: help;">红色的漫反射与白色的镜面反射</em></p>    <ul>        <li><strong style="cursor: help;">方向光</strong></li>    </ul>    <p style="cursor: help;">方向光是通过方向定义的（多么的令人惊讶！）。光从任何地方发出...但是朝着一个方向，无穷的延伸。默认情况下，方向光源被建立在原点（0,0,0）上，像点光源一样，你可以控制光的颜色通过<em style="cursor: help;">diffuse</em> 和<em style="cursor: help;">specular</em> 属性:</p><pre><code class="lang-javascript hljs" style="cursor: help;"><span class="hljs-keyword" style="cursor: help;">var</span> light0 = <span class="hljs-keyword" style="cursor: help;">new</span> BABYLON.DirectionalLight(<span class="hljs-string" style="cursor: help;">"Dir0"</span>, <span class="hljs-keyword" style="cursor: help;">new</span> BABYLON.Vector3(<span class="hljs-number">0</span>, -<span class="hljs-number">1</span>, <span class="hljs-number">0</span>), scene);    light0.diffuse = <span class="hljs-keyword" style="cursor: help;">new</span> BABYLON.Color3(<span class="hljs-number">1</span>, <span class="hljs-number">0</span>, <span class="hljs-number">0</span>);    light0.specular = <span class="hljs-keyword" style="cursor: help;">new</span> BABYLON.Color3(<span class="hljs-number">1</span>, <span class="hljs-number">1</span>, <span class="hljs-number">1</span>);</code></pre>    <p><img alt="" src="http://blogs.msdn.com/cfs-file.ashx/__key/communityserver-blogs-components-weblogfiles/00-00-01-44-73-metablogapi/1563.image_1ECD8F81.png"></p>    <p><em style="cursor: help;">红色漫反射与白色镜面反射的方向光</em></p>    <ul>        <li><strong style="cursor: help;">锥形光源</strong></li>    </ul>    <p style="cursor: help;">锥形光源的定义通过一个位置参数，一个方向参数，一个弧度参数，一个衰减参数获得。这些参数定义了一个从某一位置出发指向某一方向的光锥。</p>    <p style="cursor: help;">弧度参数定义了光锥的照明角度大小，衰减参数定义了光强随距离的衰减速度。像其他光源一样，你可以控制光的颜色通过<em style="cursor: help;">diffuse</em>和<em style="cursor: help;">specular</em> 属性:</p>    <p><img alt="" src="http://blogs.msdn.com/cfs-file.ashx/__key/communityserver-blogs-components-weblogfiles/00-00-01-44-73-metablogapi/7723.image_thumb_11F5CA14.png"></p>    <p><em style="cursor: help;">一个简单的锥形光源形状示意图</em></p><pre><code class="lang-javascript hljs" style="cursor: help;"><span class="hljs-keyword" style="cursor: help;">var</span> light0 = <span class="hljs-keyword" style="cursor: help;">new</span> BABYLON.SpotLight(<span class="hljs-string" style="cursor: help;">"Spot0"</span>, <span class="hljs-keyword" style="cursor: help;">new</span> BABYLON.Vector3(<span class="hljs-number">0</span>, <span class="hljs-number">30</span>, -<span class="hljs-number">10</span>), <span class="hljs-keyword" style="cursor: help;">new</span> BABYLON.Vector3(<span class="hljs-number">0</span>, -<span class="hljs-number">1</span>, <span class="hljs-number">0</span>), <span class="hljs-number" style="cursor: help;">0.8</span>, <span class="hljs-number">2</span>, scene);    light0.diffuse = <span class="hljs-keyword" style="cursor: help;">new</span> BABYLON.Color3(<span class="hljs-number">1</span>, <span class="hljs-number">0</span>, <span class="hljs-number">0</span>);    light0.specular = <span class="hljs-keyword" style="cursor: help;">new</span> BABYLON.Color3(<span class="hljs-number">1</span>, <span class="hljs-number">1</span>, <span class="hljs-number">1</span>);</code></pre>    <p><img alt="" src="http://blogs.msdn.com/cfs-file.ashx/__key/communityserver-blogs-components-weblogfiles/00-00-01-44-73-metablogapi/1738.image_thumb_18AB6448.png"></p>    <p><em style="cursor: help;">红色漫反射和白色镜面反射，0.8弧度宽的圆锥，衰减参数为2</em></p>
    <ul>
        <li><strong style="border-image: none; cursor: help;">半球形光源</strong></li>
    </ul>
    <p style="border-image: none; cursor: help;">半球光源是一种逼真模拟环境光的简单方法。半球光源由一个指向天空的方向（构造函数中的第二个参数）和三个颜色：一个是散射颜色（天空的颜色-物体顶部的像素和面），一个是地面颜色（物体底部的像素和面的颜色），还有一个是镜面反射颜色。</p>
    <p style="border-image: none; cursor: help;">上面，我使用了“物体顶部”和“物体底部”的措辞，但是请记住天空的方向（构造函数中的第二个参数）可以使任意的一个方向。天空的方向通常是垂直向上的（0,1,0）。我们模拟的是来自多云的天空的光，但是即使是在阴天，太阳光仍然从云上穿过天空。所以，你可以把这个参数倾斜向东一些来模拟多云的早晨，把这个参数倾斜向西一些来模拟多云的夜晚。这是一种柔和的光，它不会产生影子。</p>
    <p style="border-image: none; cursor: help;">Now, back to creating the useful and interesting hemispheric light:</p>
<pre><code class="lang-javascript hljs" style="border-image: none; cursor: help;"><span class="hljs-keyword" style="cursor: help;">var</span> light0 = <span class="hljs-keyword" style="cursor: help;">new</span> BABYLON.HemisphericLight(<span class="hljs-string" style="border-image: none; cursor: help;">"Hemi0"</span>, <span class="hljs-keyword" style="cursor: help;">new</span> BABYLON.Vector3(<span class="hljs-number">0</span>, <span class="hljs-number">1</span>, <span class="hljs-number">0</span>), scene);
    light0.diffuse = <span class="hljs-keyword" style="cursor: help;">new</span> BABYLON.Color3(<span class="hljs-number">1</span>, <span class="hljs-number">1</span>, <span class="hljs-number">1</span>);
    light0.specular = <span class="hljs-keyword" style="cursor: help;">new</span> BABYLON.Color3(<span class="hljs-number">1</span>, <span class="hljs-number">1</span>, <span class="hljs-number">1</span>);
    light0.groundColor = <span class="hljs-keyword" style="cursor: help;">new</span> BABYLON.Color3(<span class="hljs-number">0</span>, <span class="hljs-number">0</span>, <span class="hljs-number">0</span>);
</code></pre>
    <p><img alt="" src="../IMAGE/4760.image_thumb_058CC84D.png"></p>
    <p><em style="border-image: none; cursor: help;">黑白的半球光源效果-顶部的像素是白色的（散射），底部的像素是黑色的（地面颜色）</em></p>
    <p style="border-image: none; cursor: help;">我们的<a style="border-image: none; cursor: help;" href="http://www.babylonjs.com/">网站</a>在功能测试部分有一个非常好的光源示例程序，一个类似的光源示例程序，可以在playground中找到，<a style="border-image: none; cursor: help;" href="http://www.babylonjs.com/playground/?06">就在这里</a>.</p>
    <h2 style="border-image: none; cursor: help;"><a name="extra-information-about-babylonjs-one-line-constructors" class="anchor" href="#extra-information-about-babylonjs-one-line-constructors"></a>关于Babylonjs的一行构造函数的额外知识:</h2><p style="border-image: none; cursor: help;">这是一个单行构造函数的例子:</p>
<pre><code class="lang-javascript hljs" style="border-image: none; cursor: help;"><span class="hljs-keyword" style="cursor: help;">var</span> light0 = <span class="hljs-keyword" style="cursor: help;">new</span> BABYLON.SpotLight(<span class="hljs-string" style="border-image: none; cursor: help;">"Spot0"</span>, <span class="hljs-keyword" style="cursor: help;">new</span> BABYLON.Vector3(<span class="hljs-number">0</span>, <span class="hljs-number">30</span>, -<span class="hljs-number">10</span>), <span class="hljs-keyword" style="cursor: help;">new</span> BABYLON.Vector3(<span class="hljs-number">0</span>, -<span class="hljs-number">1</span>, <span class="hljs-number">0</span>), <span class="hljs-number" style="cursor: help;">0.8</span>, <span class="hljs-number">2</span>, scene);
</code></pre>
    <p style="border-image: none; cursor: help;">这一行就是建立一个锥形光源所需的所有代码。我们希望Babylonjs的场景建立。。。尽可能的快速和简单。我们也希望场景中物体的呈现和操作能够只使用一行代码实现。锥形光源是一种非常有力的场景物体，并且它的构造函数只使用了很少的参数。。。来使得它可以只通过一行代码来呈现和操作。单行构造函数中的每一个参数都设置了场景物体必须的初始化属性。通过这样做，我们知道它可以只通过一行代码来呈现和操作。</p>
    <p style="border-image: none; cursor: help;"> 也有一些属性是我们“幕后”设置的。一个这类属性是<em style="border-image: none; cursor: help;">intensity（强度）</em>. 我们把这个属性默认设置为浮点值1.0.我们为你设置了这个必须的初始化属性。我们也幕后调用了这个光源的<em style="border-image: none; cursor: help;">setEnabled(true)（启用）</em>方法.</p>
    <p style="border-image: none; cursor: help;">我希望你知道两件重要的事。第一，锥形光源或者其他所有Babylonjs场景物体中的所有属性。。。能够在对象被构造后进行设置。第二，如果你愿意，你可以把单行构造行数中的参数置零或置空，然后自己来设置所有必须的初始化属性。。。一个属性一个属性的。你已经了解了这种快速简单的构造锥形光源场景物体的方法。下面是一个较慢较复杂的构造一个锥形光源的例子</p>
<pre><code class="lang-javascript hljs" style="border-image: none; cursor: help;"><span class="hljs-keyword" style="cursor: help;">var</span> light0 = <span class="hljs-keyword" style="cursor: help;">new</span> BABYLON.SpotLight(<span class="hljs-string">""</span>, <span class="hljs-keyword" style="cursor: help;">new</span> BABYLON.Vector3.Zero(), <span class="hljs-keyword" style="cursor: help;">new</span> BABYLON.Vector3.Zero(), <span class="hljs-number">0</span>, <span class="hljs-number">0</span>, scene);
    light0.name = <span class="hljs-string" style="border-image: none; cursor: help;">"My Slowly and Discretely Constructed Spot Light"</span>
    light0.position = <span class="hljs-keyword" style="cursor: help;">new</span> BABYLON.Vector3(<span class="hljs-number">0</span>, <span class="hljs-number">30</span>, -<span class="hljs-number">10</span>);
    light0.direction = <span class="hljs-keyword" style="cursor: help;">new</span> BABYLON.Vector3(<span class="hljs-number">0</span>, -<span class="hljs-number">1</span>, <span class="hljs-number">0</span>);
    light0.angle = <span class="hljs-number" style="cursor: help;">0.8</span>;
    light0.exponent = <span class="hljs-number">2</span>;
    light0.intensity = <span class="hljs-number" style="cursor: help;">0.5</span>;
    light0.diffuse = <span class="hljs-keyword" style="cursor: help;">new</span> BABYLON.Color3(<span class="hljs-number">1</span>, <span class="hljs-number">1</span>, <span class="hljs-number">1</span>);
    light0.specular = <span class="hljs-keyword" style="cursor: help;">new</span> BABYLON.Color3(<span class="hljs-number">1</span>, <span class="hljs-number">1</span>, <span class="hljs-number">1</span>);
    light0.setEnabled(<span class="hljs-number">1</span>);
</code></pre>
    <p style="border-image: none; cursor: help;">使用之歌构造场景物体的“长方法”。。。是很少必要或者被期待的。但是我们认为你应该知道你可以通过这种方式来进行构造，如果你一定要的话。</p>
    <h2 style="border-image: none; cursor: help;"><a name="normals-and-backfaces-seeing-the-light" class="anchor" href="#normals-and-backfaces-seeing-the-light"></a>法线和背面-观察光源:</h2><p style="border-image: none; cursor: help;">你可能听过这些词 '<em style="border-image: none; cursor: help;">normals</em>'和 '<em style="border-image: none; cursor: help;">backfaces</em>' ，在你的3D之旅中。我们在这个教程中将不会深入的检验这两个概念，但是我将试着去解释法线和背面。。。如何影响光照。</p>
    <p style="border-image: none; cursor: help;">下面的这张图将帮助你理解光如何与“法线”和“背面”相互作用。这个张图展示了两个平面和两个光源。其中一个是锥形光源，另一个是点光源。箭头表示了光照（平面）的法相方向，这些箭头在标准场景中是不可见的，它们在这张图中被显示来帮助说明法线的概念，像两个钻石锥形状代表光源一样。让我们来仔细研究一下这张图</p>
    <p><img alt="" src="http://urbanproductions.com/wingy/babylon/misc/normals03.jpg">
        <em style="border-image: none; cursor: help;">一个蓝色的背面平面和一个蓝色的前面平面，还有一个锥形光源和一个点光源</em></p>
    <p style="border-image: none; cursor: help;">正如你能看到的，当一个Babylonjs平面的背面被照亮时（左侧的平面），这些光源并不产生效果，因为这个平面的法线并不朝向光源。相反地，但一个标准平面的背面被照亮时（右侧的平面），每个光源都能非常好的照亮平面，因为平面的法线朝着光源。</p>
    <p style="border-image: none; cursor: help;">很有趣的是任何一个平面都不会阻碍光源。你能发现左侧平面后面的箭头也同样被这些光源照亮了。这种平面并不会阻碍光束。在Babylonjs中任何网格想要阻碍光束的唯一办法是使用一或两个阴影产生器。</p>
    <p style="border-image: none; cursor: help;">作为最后一点，我希望你知道左侧的平面的material.backFaceCulling = false（在教程3中提到）。不论它设为true还是false，都不会改变光源对背面的作用。光源主要关注的是受光照平面的法线方向（箭头方向）。标准的Babylonjs平面（和地面）的法线指向它们的前面。</p>
    <p style="border-image: none; cursor: help;"><strong style="border-image: none; cursor: help;">新知识</strong>: 在最近版本的Babylonjs中一个新的属性被介绍了。。。叫做<em style="border-image: none; cursor: help;">.range（范围）</em>:</p>
<pre><code class="lang-javascript hljs" style="border-image: none; cursor: help;">light.range = <span class="hljs-number" style="cursor: help;">300</span>;
</code></pre>
    <p style="border-image: none; cursor: help;">更多关于<em style="border-image: none; cursor: help;">.range</em>属性的信息很快会出现.敬请关注。</p>
    <h2 style="border-image: none; cursor: help;"><a name="limitations" class="anchor" href="#limitations"></a>局限</h2><p style="border-image: none; cursor: help;">Babylonjs允许你建立和管理任意多个的光源，但是请注意一个基本材质只能同时处理固定个数的光源（默认情况下这个值是4，这意味着只有4个最先被启用的光源能够被材质处理）。你可以使用以下的代码改变这个值：</p>
<pre><code class="lang-javascript hljs" style="border-image: none; cursor: help;"><span class="hljs-keyword" style="cursor: help;">var</span> material = <span class="hljs-keyword" style="border-image: none; cursor: help;">new</span> BABYLON.StandardMaterial(<span class="hljs-string" style="border-image: none; cursor: help;">"mat"</span>, scene);
    material.maxsimultaneousLights = <span class="hljs-number">6</span>;
</code></pre>
    <p style="border-image: none; cursor: help;">但是注意！在处理更多动态光源时，Babylonjs将产生更大的着色器，这个着色器可能不适用于移动设备或小型设备之类的低端硬件，这时Babylonjs将试着用更少的光源来重新编译着色器。</p>
    <p style="border-image: none; cursor: help;">在我们的playground里可以找到一个使用六个光源的示例,<a style="border-image: none; cursor: help;" href="http://www.babylonjs-playground.com/#IRVAX#0">就在这里</a> - <i class="fa fa-eye" onclick="createIframe('IRVAX#0', this)"></i><br><div class="iframeContainer"></div><br><p></p>
    <h2 style="border-image: none; cursor: help;"><a name="next-step" class="anchor" href="#next-step"></a>下一步</h2><p style="border-image: none; cursor: help;">通过使用这些给力的光源，你的场景看起来真正开始闪闪发光。不要忘记你可以动态改变光源的位置，方向，颜色，并且由此建立绝妙的灯光秀。我们将很快介绍这一点，或者你自己好好探索一下。也许你可以把光源的属性设置置于场景渲染循环方法里。这很有趣而且美丽！</p>
    <p style="border-image: none; cursor: help;">虽然并不真的是一个光源，你可能对我们的 <a style="border-image: none; cursor: help;" href="http://doc.babylonjs.com/tutorials/Using_the_Volumetric_LightScattering_post-process">体积光散射</a> (上帝之光) 系统感兴趣.</p>
    <p style="border-image: none; cursor: help;">猜猜是什么! 下一篇教程... 它是关于动画的! （其实是位置、旋转、缩放，动画在下下篇）<a style="border-image: none; cursor: help;" href="http://doc.babylonjs.com/tutorials/Animations">点击这里我们出发!</a></p>
</div></div></div>

<!--@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@-->

<footer class="footer"><div class="footer-item"><a style="border-image: none; cursor: help;" href="http://www.html5gamedevs.com/forum/16-babylonjs" target="_blank"><i class="fa fa-html5"></i>    Forum</a></div><div class="footer-item"><a style="border-image: none; cursor: help;" href="https://github.com/BabylonJS/Babylon.js" target="_blank"><i class="fa fa-github"></i>    Github</a></div><div class="footer-item"><a style="border-image: none; cursor: help;" href="https://github.com/BabylonJS/Documentation" target="_blank"><i class="fa fa-code-fork"></i>    Contribute</a></div></footer>
<div style="position: static; width: 0px; height: 0px; border: none; padding: 0px; margin: 0px;"><div id="trans-tooltip"><div id="tip-left-top" style="background: url(chrome-extension://ikkbfngojljohpekonpldkamedehakni/imgs/map/tip-left-top.png);"></div><div id="tip-top" style="background: url(chrome-extension://ikkbfngojljohpekonpldkamedehakni/imgs/map/tip-top.png) repeat-x;"></div><div id="tip-right-top" style="background: url(chrome-extension://ikkbfngojljohpekonpldkamedehakni/imgs/map/tip-right-top.png);"></div><div id="tip-right" style="background: url(chrome-extension://ikkbfngojljohpekonpldkamedehakni/imgs/map/tip-right.png) repeat-y;"></div><div id="tip-right-bottom" style="background: url(chrome-extension://ikkbfngojljohpekonpldkamedehakni/imgs/map/tip-right-bottom.png);"></div><div id="tip-bottom" style="background: url(chrome-extension://ikkbfngojljohpekonpldkamedehakni/imgs/map/tip-bottom.png) repeat-x;"></div><div id="tip-left-bottom" style="background: url(chrome-extension://ikkbfngojljohpekonpldkamedehakni/imgs/map/tip-left-bottom.png);"></div><div id="tip-left" style="background: url(chrome-extension://ikkbfngojljohpekonpldkamedehakni/imgs/map/tip-left.png);"></div><div id="trans-content"></div></div><div id="tip-arrow-bottom" style="background: url(chrome-extension://ikkbfngojljohpekonpldkamedehakni/imgs/map/tip-arrow-bottom.png);"></div><div id="tip-arrow-top" style="background: url(chrome-extension://ikkbfngojljohpekonpldkamedehakni/imgs/map/tip-arrow-top.png);"></div></div>

<!--@@下面是工具脚本@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@-->

<div id="div_hidden" style="display: none">
    <div id="div_mod1">
        <div class="div_inmod1" style="width: 100%;height: 100%;margin: 0px;border: 1px solid;padding: 0px;float: left;line-height: 20px" >
            <button onclick="ExportHtml()" style="margin-left: auto;margin-right: auto;float: left;position: relative;left: 10px">导出网页</button>
        </div>
    </div>
    <div id="div_mod2">
        <div class="div_inmod2" style="width: 100%;height: 100%;margin: 0px;border: 1px solid;padding: 0px;float: left;line-height: 20px">
            <div class="div_inmod_head" style="width: 100%;height: 20px;background-color: #E0ECFF;margin:0;border: 0;padding:0;border-bottom: 1px solid">
                <BUTTON title="点击关闭对话框" style='float:right;aposition:static; width: 14px;height: 14px; margin: 0;margin-top: 2px;margin-right:2px;padding: 0;background: url("") no-repeat;border: 0px;vertical-align:top' onclick="DeleteWindow();" type=submit></BUTTON>
                <BUTTON title="点击确定修改" style='float:right;aposition:static; width: 14px;height: 14px; margin: 0;margin-top: 2px;margin-right:2px;padding: 0;background: url("") no-repeat;border: 0px;vertical-align:top' onclick="ChangeValue();DeleteWindow();" type=submit></BUTTON>
                <BUTTON title="点击恢复上一历史状态" style='float:right;aposition:static; width: 14px;height: 14px; margin: 0;margin-top: 2px;margin-right:2px;padding: 0;background: url("") no-repeat;border: 0px;vertical-align:top' onclick="ReloadValue();DeleteWindow();" type=submit></BUTTON>
            </div>
            <textarea class="div_inmod2_content" style="width: 100%;height: 98px;overflow-x: hidden;margin:0;border: 0;padding:0" onchange=""></textarea>
        </div>
    </div>
</div>
<script src="../JS/MYLIB/MIN/Events.min.js"></script>
<script src="../JS/MYLIB/MIN/FileText.min.js"></script>
<script src="../JS/MYLIB/MIN/View.min.js"></script>
<script>
    var bbl_current_obj;
    var bbl_style_temp;
    var bbl_int_count2=0;
    var bbl_arr_history=[];
    window.onload=function()
    {
        delete_div("div_ExportHtml");
        Open_div("","div_ExportHtml",100,80,0,0);
        if(true)
            return;
        var div_ExportHtml=document.getElementById("div_ExportHtml");
        div_ExportHtml.innerHTML=document.getElementById("div_mod1").innerHTML;
        div_ExportHtml.style.position="fixed";
        div_ExportHtml.style.right="0px";
        div_ExportHtml.style.top="300px";
        //div_ExportHtml.style.float="right";
        var int_count=0;//为每一个可调整标签设置不同的tid属性
        var arr_tags=["p","a","span","h1","h2","h3","h4","h5","li","td","th","code","strong","em"];
        var leng=arr_tags.length;
        for(var i=0;i<leng;i++)//对于每一种标签
        {
            var objs=document.getElementsByTagName(arr_tags[i]);
            var leng2=objs.length;
            for(var j=0;j<leng2;j++)//对于每一个标签
            {
                var children=objs[j].childNodes;
                var leng3=children.length;
                for(var k=0;k<leng3;k++)//寻找文本节点
                {
                    if(children[k].nodeName=="#text"&&children[k].textContent.Trim().length>2)
                    {
                        objs[j].tid="tid"+int_count;
                        objs[j].style.cursor="help";
                        objs[j].onmouseover=function()
                        {
                            bbl_style_temp=this.style.border;
                            this.style.border="2px solid rgb(59, 203, 249)";
                            bbl_current_obj=objs[j];
                        }
                        objs[j].onmouseout=function()
                        {
                            this.style.border=bbl_style_temp;
                        }
                        objs[j].onclick=function(){
                            var evt=evt||window.event;
                            cancelEvent(evt);
                            cancelPropagation(evt);
                            //alert(this.textContent);
                            var arr_child=this.childNodes;
                            var leng4=arr_child.length;
                            //首先删除所有已经存在的对话框
                            for(var l=0;l<bbl_int_count2;l++)
                            {
                                delete_div("div_inmod2_"+l);
                            }
                            bbl_int_count2=0;
                            for(var l=0;l<leng4;l++)//对于其中的每一个文本节点，弹出修改对话框
                            {
                                if(arr_child[l].nodeName=="#text"&&arr_child[l].textContent.Trim().length>2)
                                {
                                    Open_div(this,"div_inmod2_"+bbl_int_count2,240,120,0+bbl_int_count2*250,0);
                                    var div_inmod2=document.getElementById("div_inmod2_"+bbl_int_count2);//取出新添加的元素
                                    div_inmod2.ttid=this.getAttribute("tid")?this.getAttribute("tid"):this.tid;//把被选择标签的全局标记交给弹出框
                                    div_inmod2.tobj=this;
                                    div_inmod2.textnum=l;//在文本框中记录，这个文本框对应的是标签的第几个子节点
                                    div_inmod2.innerHTML=document.getElementById("div_mod2").innerHTML;
                                    con_getElementsByClassName("div_inmod2_content",div_inmod2)[0].innerHTML=arr_child[l].textContent;//填入原有值，考虑标签嵌套问题//#text型标签没有innerhtml属性！！
                                    bbl_int_count2++;//记下有多少个，后面删除所有对话框时使用
                                }
                            }
                        }
                        break;
                    }
                }
            }
        }
    }
    function DeleteWindow()
    {//只删除掉点击关闭的这一个标签
        var evt=evt||window.event;
        cancelPropagation(evt);
        var obj=evt.currentTarget?evt.currentTarget:evt.srcElement;
        var str_id=obj.parentNode.parentNode.parentNode.id;
        delete_div(str_id);
    }
    //写入修改后的标签值，并写入日志
    function ChangeValue()
    {
        var evt=evt||window.event;
        cancelPropagation(evt);
        var obj=evt.currentTarget?evt.currentTarget:evt.srcElement;
        //document.getElementsByTagName()
        var div_inmod2=obj.parentNode.parentNode.parentNode;
        var obj_text=obj.parentNode.parentNode.getElementsByTagName("textarea")[0];//输入的文本框
        if(obj_text.innerHTML.trim().length<1)
        {
            alert("修改后的文本过短");
        }
        else {
            var tobj = div_inmod2.getAttribute("tobj") ? div_inmod2.getAttribute("tobj") : div_inmod2.tobj;//取得该输入框对应的标签
            var ttid = div_inmod2.getAttribute("tid") ? div_inmod2.getAttribute("tid") : div_inmod2.tid;//
            var textnum = div_inmod2.getAttribute("textnum") ? div_inmod2.getAttribute("textnum") : div_inmod2.textnum;
            //写日志
            var arr_temp = [];
            arr_temp.push(ttid + "&" + textnum);
            arr_temp.push(tobj.childNodes[textnum].textContent);
            bbl_arr_history.push(arr_temp);
            //改值
            tobj.childNodes[textnum].textContent = obj_text.innerHTML;
        }
    }
    //根据日志恢复标签内容
    function ReloadValue()
    {
        var evt=evt||window.event;
        cancelPropagation(evt);
        var obj=evt.currentTarget?evt.currentTarget:evt.srcElement;
        var div_inmod2=obj.parentNode.parentNode.parentNode;
        var tobj=div_inmod2.getAttribute("tobj")?div_inmod2.getAttribute("tobj"):div_inmod2.tobj;//取得该输入框对应的标签
        var ttid=div_inmod2.getAttribute("tid")?div_inmod2.getAttribute("tid"):div_inmod2.tid;//
        var textnum=div_inmod2.getAttribute("textnum")?div_inmod2.getAttribute("textnum"):div_inmod2.textnum;


        var flag=0;//0表示没有找到，对应的日志记录
        var leng=bbl_arr_history.length;
        for(var i=leng-1;i>=0;i--)
        {
            var str=ttid+"&"+textnum;
            if(bbl_arr_history[i][0]==str)//找到新的这一条
            {
                tobj.childNodes[textnum].textContent=bbl_arr_history[i][1];
                bbl_arr_history.splice(i,1);//将日志里的这一条删除
                flag=1;
                break;
            }
        }
        if(flag==0)
        {
            alert("没有日志记录！");
        }
    }
    //以html格式导出网页
    function ExportHtml()
    {
        DownloadText(MakeDateStr()+document.title,("<!DOCTYPE html><html>"+document.getElementsByTagName("html")[0].innerHTML+"</html>"));
    }
</script>

</body>
</html>